<script>
import { addPaiLogo, deletePaiLogo, getTablePaiLogoListByPage, updatePaiLogo } from '@/api/contentCenter'
import api from '@/api/banner'

const baseApi = process.env.VUE_APP_API_BASE_URL

export default {
  name: 'Index',
  data () {
    return {
      uploadApi: baseApi + api.upload,
      tableData: [],
      treeData: [],
      page: {
        page: 1,
        limit: 10000
      },
      modal: {
        visible: false,
        title: '',
        form: {},
        rules: {
          name: [
            { required: true, message: '公司名称不能为空', trigger: 'blur' }
          ]
        }
      }
    }
  },
  mounted () {
    this.getTable()
  },
  methods: {
    handleDel (record) {
      this.$confirm(`您确定要删除该数据吗？`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePaiLogo([record.id]).then(() => {
          this.$message.success('删除成功')
          this.getTable()
        })
      }).catch(() => {
      })
    },
    handleAvatarSuccess (e) {
      this.modal.form.logo = e.data.src
    },
    submitForm (formName) {
      if(this.modal.form.name===''){
        this.$message.warning('公司名称：不能为空')
        return false
      }
      if(this.modal.form.logo===''){
        this.$message.warning('公司logo：不能为空')
        return false        
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.modal.form.id) {
          console.log('update')
            updatePaiLogo(this.modal.form, this.typeId).then(res => {
              this.$message.success(res.msg)
              this.modal.form = {}
              this.modal.visible = false
              this.getTable()
            })
          } else {
          console.log('add')
            addPaiLogo(this.modal.form, this.typeId).then(res => {
              this.$message.success(res.msg)
              this.modal.form = {}
              this.modal.visible = false
              this.getTable()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleAdd () {
      this.modal.form = {
        logo: '',
        name: '',
        sort_order: 10
      }
      this.modal.visible = true
      this.modal.title = '新增'
    },
    getTable () {
      getTablePaiLogoListByPage(this.page, this.typeId).then(res => {
        this.tableData = res.data.records
      })
    },
    handleEdit (record) {
      const data = JSON.parse(JSON.stringify(record))
      this.modal.form = {
        name: data.name,
        sort_order: data.sortOrder,
        logo: data.logo,
        id: data.id
      }
      this.modal.visible = true
      this.modal.title = '编辑'
    }
  }
}
</script>

<template>
  <page-header-wrapper :title="false">
    <el-card class="box-card">
      <div slot="header" class="table-page-search-wrapper">
        <a-button icon="plus" style="margin-right: 8px" type="primary" @click="handleAdd">新建</a-button>
      </div>
      <el-table
        :data="tableData"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        border
        default-expand-all
        row-key="id"
        style="width: 100%">
        <el-table-column label="公司名称" prop="name" align="center"/>
        <el-table-column label="LOGO" align="center">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.logo"
              style="width: 100px; height: 100px"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="排序号" prop="sortOrder" align="center" />
        <el-table-column
          fixed="right"
          label="操作" align="center"
          width="180">
          <template slot-scope="scope">
            <el-link
              :underline="false"
              type="primary"
              @click="handleEdit(scope.row)">编辑
            </el-link>
            <el-link
              :underline="false"
              style="margin: 0 0 0 10px"
              type="danger"
              @click="handleDel(scope.row)">删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      :title="modal.title"
      :visible.sync="modal.visible"
      width="500px">
      <el-form ref="ruleForm" :model="modal.form" :rules="modal.rules" class="demo-ruleForm" label-width="100px">
        <el-form-item label="公司名称">
          <el-input v-model="modal.form.name" clearable placeholder="请输入公司名称"></el-input>
        </el-form-item>
        <el-form-item label="LOGO">
          <el-upload
            :action="uploadApi"
            :on-success="handleAvatarSuccess"
            :show-file-list="false"
            class="avatar-uploader">
            <img v-if="modal.form.logo !== ''" :src="modal.form.logo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="modal.form.sort_order" :min="1" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
          <el-button @click="modal.visible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </page-header-wrapper>
</template>

<style lang="less" scoped>
.avatar-uploader ::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
